<template>
  <div class="layout">
    <Row>
      <Col span="12">
        <Input
          v-model="value"
          placeholder="输入要解析的Json..."
          style="width: 300px"
          size="large"
          :autosize="{ maxRows: 50, minRows: 30 }"
          type="textarea"
        />
      </Col>
      <Col span="12"> </Col>
    </Row>
    <Row>
      <Button type="info" @click="DoParse" shape="circle">解析</Button>
      <Button type="success" @click="DoStringfy" shape="circle">压缩</Button>
    </Row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    DoParse() {
      let res = this.value;
      try {
        res = JSON.parse(this.value);
        this.$Message.success("Json解析成功!");
        this.value = JSON.stringify(res, null, 4);
      } catch (error) {
        this.$Message.error(`Json解析失败！原因为:${error}`);
      }
    },
    DoStringfy() {
      let res = this.value;
      try {
        res = JSON.stringify(this.value);
        this.$Message.success("Json压缩成功!");
      } catch (error) {
        this.$Message.error(`Json压缩失败！原因为:${error}`);
      }
    },
  },
};
</script>


<style>
</style>